<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8" />
        <title>SimpleUI 示例中心--autoComplete</title>
		<meta name="description" content="SimpleUI是一个基于jQuery的组件库，适合用于构建web2.0的应用程序和小型网站" />
		<meta name="keywords" content="jQuery js simple ui simpleUI web application" />
        <link type="text/css" rel="stylesheet" href="../SyntaxHighlighter/SyntaxHighlighter.css"/>
        <link type="text/css" rel="stylesheet" href="../css/core.css"/>
        <link type="text/css" rel="stylesheet" href="../../src/_beta/SimpleDialog/SimpleDialog.css"/>
        <style type="text/css">
            .demo-area {
                padding: 10px;
                border: 1px solid #eee;
                background: #fbfbfb;
                height: 100px;
            }
            
            .drag-demo {
                position: relative;
                width: 100px;
                height: 100px;
                border: 1px solid #ddd;
                background: #f6f6f6;
            }
            
            .drag-demo h2 {
                margin: 5px;
                color: #fff;
                background: #839CF7;
                padding: 3px 5px;
                text-align: center
            }
            
            .demo-mail {
                float: left;
                width: 120px;
            }
            
            .demo-mail li {
                line-height: 25px;
                border-bottom: 1px solid #ddd;
                padding-left: 10px;
                cursor: pointer;
            }
            
            .mail-list {
                margin-left: 140px;
            }
            
            .mail-list table {
                width: 600px;
            }
            
            .mail-list td {
                border: 1px solid #ddd;
                height: 25px;
                padding-left: 10px;
            }
            
            .drag-proxy {
                background: red;
                width: 20px;
                height: 20px;
                border-radius: 10px;
                text-align: center;
                color: #fff;
            }
            
            .demo-mail em {
                margin-left: 10px;
                color: red
            }
            
            .mail-list td span {
                cursor: move;
                vertical-align: middle;
            }
            
            .mail-list td * {
                vertical-align: middle;
            }
            
            .simple-show {
                padding: 30px 100px;
            }
            
            #complex {
                height: auto;
                overflow: hidden;
            }
            
            #complex li {
                float: left;
                margin-left: 10px;
                display: inline;
                width: 200px;
                height: 100px;
                overflow: hidden;
            }
			.text{
				border:1px solid #ddd;
				height:18px;
				text-indent:5px;
			}
            
           .orange{
                color:#FF5500;
            }
            .simple-autocomplete-container{
                border:1px solid #ddd;
                box-shadow:1px 1px 3px rgba(200,200,200,0.8);
				background:#fff;
            }
            .simple-autocomplete-select{
                background: #f1f1f1;
            }
            .simple-autocomplete-container li{
                padding: 3px 10px;
            }
        </style>
    </head>
    <body>
        <div class="container clearfix" id="hd">
            <h1 class="s-logo"></h1>
            <div class="s-nav">
                <span class="s-nav-l"></span>
                <span class="s-nav-r"></span>
                <ul class="clearfix">
                    <li class="current">
                        <a href="/doc/doc.html">文档</a>
                    </li>
                    <li>
                        <a href="/doc/demo.html">示例</a>
                    </li>
                    <li>
                        <a href="http://code.google.com/p/simple-ui/downloads/list">下载</a>
                    </li>
                    <li>
                        <a href="/doc/deploy.html">部署</a>
                    </li>
					<li>
                        <a href="http://www.iqianduan.org/t-191-1-1.html" target="_blank">论坛</a>
                    </li>
                    <li>
                        <a href="#">关于</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="container" id="bd">
            <h2 class="s-title">SimpleUI示例中心</h2>
            <div class="clearfix doc-content demo-content">
                <div class="api-content">
                    <h2 class="api-name">Simple AutoComplete Demo&nbsp;&nbsp;<!--<a class="view-api">查看API</a>--></h2>
                    <h3 class="api-guide">简单示例</h3>
                    <textarea name="code" class="js">
                    	
$("#testInput").autocomplete({
   source:["javascript","java","subsvn","actionscript","jdk","json","ruby","python","css","html","etc"]
})
                    </textarea>
                    <div class="demo-area">
                       <input type="text" class="text" id="testInput"/>
                    </div>
                    <h3 class="api-guide">复杂示例一(淘宝搜索提示)</h3>
                    <p>
                        在这个示例中演示了怎么自定义自动完成的数据源与格式化数据的函数
                    </p>
                    <div class="demo-area" id="complex">
                    	   <input type="text" class="text" id="taobao"/>
                    </div>
                    <textarea name="code" class="js">
                    	
$("#taobao").autocomplete({
	source: function(val, parse){
	    $.ajax({
	        url:"http://suggest.taobao.com/sug?code=utf-8&callback=?",
	        data:{
	            q:val
	        },
	        dataType:"jsonp",
	        success:function(r){
	            parse(r);
	        }
	    });
	},
	format:function(value,item){
	    var itemText=item[0].replace(value, "<b class='orange'>" + value + "</b>"),
	    li=$("<li/>").html(itemText).data("value",item[0]);
	    return li;
	},
	isResult:function(data){
	    return data.result.length;
	},
	dealData:function(data){
	    return data.result;
	},
	onselect:function(val){
         Simple.log(val);
    }
})
                    </textarea>
					 <h3 class="api-guide">复杂示例二(Combo box)</h3>
                    <p>
                        在这个示例中演示了通过自动完成将select转换成Combo box
                    </p>
                    <div class="demo-area" id="complex">
                    	<select id="comboSelect">
			                <option value="javascript">javascript</option>
			                <option value="java">java</option>
			                <option value="ruby">ruby</option>
			                <option value="json">json</option>
			                <option value="jukoes">jukoes</option>
			                <option value="options">options</option>
                        </select>
						<button id="change">点击转换</button>
						<button id="destroy">点击销毁</button>
                    </div>
                    <textarea name="code" class="js">
                    	
Simple.declare("Combobox", null, {
node: null,
init: function(){
    if (this.node) {
        var self = this, data = [];
        this.node = $(this.node);
        this.renderNode = $("<input type='text'/>").addClass("simple-combobox-input");
        this.activeBtn = $("<a>").addClass("simple-combobox-active").text("激活");
        self.node.find("option").each(function(){
            var val = $(this).val(), text = $(this).text();
            data.push({
                label: text,
                value: val
            });
        });
        this.allData = data;
        this.autoObj = this.renderNode.autocomplete({
            source: function(value, callback){
                data = self.autoObj.data("widget_autocomplete").filterData(self.allData, value);
                callback(data);
            },
            onselect: function(val){
                self.node.val(val);
            }
        });
        this.activeBtn.click(function(){
            self.autoObj.data("widget_autocomplete").parseData(self.allData);
        });
        this.node.after(this.renderNode);
        this.renderNode.after(this.activeBtn);
        this.node.hide();
    }
},
destroy: function(){
    this.node.show();
    this.renderNode.remove();
    this.activeBtn.remove();
}
});
Simple.bridgeTojQuery("combobox", Simple.Combobox);
$("#change").click(function(){
      $("#comboSelect").combobox();
});
$("#destroy").click(function(){
      $("#comboSelect").combobox("destroy");
});
                    </textarea>
                </div>
            </div>
        </div>
        <script src="../SyntaxHighlighter/shCore.js">
        </script>
        <script src="../SyntaxHighlighter/allmin.js"></script>
        <script type="text/javascript" src="../../src/jquery.js">
        </script>
		 <script type="text/javascript">
           $(function(){
                dp.SyntaxHighlighter.ClipboardSwf = 'SyntaxHighlighter/clipboard.swf';
                dp.SyntaxHighlighter.HighlightAll('code');
            })
        </script>
        <script type="text/javascript" src="../../src/_beta/SimpleCore.js">
        </script>
        <script type="text/javascript" src="../../src/_beta/SimpleAutoComplete/SimpleAutoComplete.js">
        </script>
        <script type="text/javascript">
            (function(){
                var ajaxHtmlStore = {}, getHtml = function(url){
                    var temp;
                    if (ajaxHtmlStore[url]) {
                        $(".api-content").html(ajaxHtmlStore[url]);
                        dp.SyntaxHighlighter.ClipboardSwf = 'SyntaxHighlighter/clipboard.swf';
                        dp.SyntaxHighlighter.HighlightAll('code');
                    }
                    else {
                        $.get(url, function(res){
                            ajaxHtmlStore[url] = res;
                            $(".api-content").html(ajaxHtmlStore[url]);
                            dp.SyntaxHighlighter.ClipboardSwf = 'SyntaxHighlighter/clipboard.swf';
                            dp.SyntaxHighlighter.HighlightAll('code');
                        });
                    }
                }
                $("#testInput").autocomplete({
                    source:["javascript","java","subsvn","actionscript","jdk","json","ruby","python","css","html","etc"]
                });
				//demo2
                $("#taobao").autocomplete({
                    source: function(val, parse){
                        $.ajax({
							url:"http://suggest.taobao.com/sug?code=utf-8&callback=?",
							data:{
								q:val
							},
							dataType:"jsonp",
							success:function(r){
								parse(r);
							}
						});
                    },
					format:function(value,item){
						var itemText=item[0].replace(value, "<b class='orange'>" + value + "</b>"),
						li=$("<li/>").html(itemText).data("value",item[0]);
						return li;
					},
					isResult:function(data){
						return data.result.length;
					},
					dealData:function(data){
						return data.result;
					},
					onselect:function(val){
						Simple.log(val);
					}
                })
                //demo3
			Simple.declare("Combobox", null, {
                node: null,
                init: function(){
                    if (this.node) {
                        var self = this, data = [];
                        this.node = $(this.node);
                        this.renderNode = $("<input type='text'/>").addClass("simple-combobox-input");
                        this.activeBtn = $("<a>").addClass("simple-combobox-active").text("激活");
                        self.node.find("option").each(function(){
                            var val = $(this).val(), text = $(this).text();
                            data.push({
                                label: text,
                                value: val
                            });
                        });
                        this.allData = data;
                        this.autoObj = this.renderNode.autocomplete({
                            source: function(value, callback){
                                data = self.autoObj.data("widget_autocomplete").filterData(self.allData, value);
                                callback(data);
                            },
                            onselect: function(val){
                                self.node.val(val);
                            }
                        });
                        this.activeBtn.click(function(){
                            self.autoObj.data("widget_autocomplete").parseData(self.allData);
                        });
                        this.node.after(this.renderNode);
                        this.renderNode.after(this.activeBtn);
                        this.node.hide();
                    }
                },
                destroy: function(){
                    this.node.show();
					this.autoObj.data("widget_autocomplete").menuContainer.remove();
                    this.renderNode.remove();
                    this.activeBtn.remove();
                }
            });
            Simple.bridgeTojQuery("combobox", Simple.Combobox);
				$("#change").click(function(){
					if(!$("#comboSelect").data("widget_combobox")){
						$("#comboSelect").combobox();
					}
				});
				$("#destroy").click(function(){
                    $("#comboSelect").combobox("destroy");
                });
            })();
        </script>
		<span style="display:none"><script src="http://s24.cnzz.com/stat.php?id=3606083&web_id=3606083"></script></span>
    </body>
</html>
